Ajax এর মাধ্যমে ডাটাবেস থেকে ডেটা রিকোয়েস্ট করা একটি সাধারণ এবং কার্যকরী পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে। Ajax এর মাধ্যমে একটি ক্লায়েন্ট-সাইড রিকোয়েস্ট সার্ভারে পাঠানো হয়, যেখানে PHP স্ক্রিপ্ট ডাটাবেস থেকে ডেটা ফেচ করে এবং রেসপন্স হিসাবে JSON বা HTML আউটপুট করে পাঠায়। ক্লায়েন্ট সাইডে সেই ডেটা প্রসেস করে ডায়নামিকভাবে UI-তে দেখানো হয়।
উদাহরণ: Ajax এর মাধ্যমে Database থেকে ডেটা রিকোয়েস্ট করা
১. HTML এবং JavaScript (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Database Request Example</title>
</head>
<body>
<h1>Employee List</h1>
<button onclick="fetchEmployeeData()">Fetch Employees</button>
<div id="employee-container">
<!-- ডেটা এখানে দেখানো হবে -->
</div>
<script>
function fetchEmployeeData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "fetch_employees.php", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হলে
if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
var output = "<h2>Employees:</h2><ul>";
data.forEach(function(employee) {
output += `<li>${employee.name} - ${employee.email}</li>`;
});
output += "</ul>";
document.getElementById("employee-container").innerHTML = output;
} else {
document.getElementById("employee-container").innerHTML = "Error fetching data.";
}
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("employee-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
- HTML ফাইলে একটি শিরোনাম (
<h1>), একটি বোতাম (<button>), এবং একটি<div>এলিমেন্ট রয়েছে। - "Fetch Employees" বোতামে ক্লিক করলে
fetchEmployeeData()ফাংশন কল হবে, যা Ajax এর মাধ্যমেfetch_employees.phpফাইলে একটি GET রিকোয়েস্ট পাঠাবে। employee-containerনামে একটি<div>এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত ডেটা বা ত্রুটি মেসেজ দেখানো হবে।
২. PHP স্ক্রিপ্ট (fetch_employees.php):
<?php
// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
http_response_code(500); // Internal Server Error
echo json_encode(["error" => "Database connection failed."]);
exit();
}
// SQL কুয়েরি
$sql = "SELECT name, email FROM employees";
$result = $conn->query($sql);
// ডেটা রেসপন্স তৈরি করা
$employees = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
}
// JSON ফরম্যাটে হেডার সেট করা
header('Content-Type: application/json');
// JSON ফরম্যাটে ডেটা রিটার্ন করা
echo json_encode($employees);
// ডাটাবেস কানেকশন বন্ধ করা
$conn->close();
?>
বিস্তারিত ব্যাখ্যা:
- ডাটাবেস কানেকশন:
- ডাটাবেসের সাথে কানেকশন সেটআপ করা হয়েছে, যেখানে
localhostএ MySQL সার্ভার কানেক্ট করা হয়েছে।
- ডাটাবেসের সাথে কানেকশন সেটআপ করা হয়েছে, যেখানে
- SQL কুয়েরি:
- SQL কুয়েরি ব্যবহার করে
employeesটেবিল থেকেnameএবংemailকলামগুলো ফেচ করা হয়েছে।
- SQL কুয়েরি ব্যবহার করে
- JSON ফরম্যাটে ডেটা রিটার্ন করা:
- ফেচ করা ডেটা
$employeesঅ্যারেতে স্টোর করা হয়েছে। json_encode()ফাংশন ব্যবহার করে ডেটা JSON ফরম্যাটে কনভার্ট করা হয়েছে এবং PHP এরheader('Content-Type: application/json');দিয়ে JSON হেডার সেট করা হয়েছে।
- ফেচ করা ডেটা
ডাটাবেস সেটআপ:
ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL
);
প্রোগ্রামটি কিভাবে কাজ করে:
- JavaScript এবং HTML:
- ব্যবহারকারী যখন "Fetch Employees" বোতামে ক্লিক করে, তখন
fetchEmployeeData()ফাংশন কল হয়। - ফাংশনটি একটি Ajax GET রিকোয়েস্ট পাঠায়
fetch_employees.phpএ।
- ব্যবহারকারী যখন "Fetch Employees" বোতামে ক্লিক করে, তখন
- PHP স্ক্রিপ্ট:
- PHP স্ক্রিপ্ট ডাটাবেস থেকে ইউজারদের ডেটা ফেচ করে এবং JSON ফরম্যাটে রেসপন্স করে।
- JavaScript JSON প্রসেসিং:
- Ajax রিকোয়েস্ট সফল হলে, JSON ডেটা প্রসেস করা হয় এবং HTML এ ডায়নামিকভাবে ইনজেক্ট করা হয়।
Ajax এবং Database এর মাধ্যমে ডেটা ফেচ করার সুবিধা:
- পেজ রিফ্রেশ ছাড়াই ডেটা আপডেট: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডাইনামিক ডেটা লোড এবং আপডেট করা যায়।
- JSON ফরম্যাটে ডেটা রেসপন্স: PHP থেকে JSON ফরম্যাটে ডেটা পাঠানো হয়েছে, যা JavaScript এর মাধ্যমে সহজে প্রসেস করা যায়।
- অ্যাসিনক্রোনাস যোগাযোগ: Ajax অ্যাসিনক্রোনাসভাবে ডেটা রিকোয়েস্ট করে, যার ফলে ব্যবহারকারী পেজে অন্য কাজ করতে পারে এবং ডেটা লোড হওয়ার সাথে সাথে তা দেখানো যায়।
- ডায়নামিক রেসপন্স: Ajax এর মাধ্যমে PHP স্ক্রিপ্ট এক্সিকিউট করে ডায়নামিক রেসপন্স পাওয়া যায় এবং তা UI এ দেখানো যায়।
সারসংক্ষেপ:
- Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে ডাইনামিক ডেটা ফেচ এবং প্রদর্শন করা হয়েছে, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।
- JavaScript এবং PHP Integration: JavaScript এর মাধ্যমে Ajax GET রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট সার্ভারে এক্সিকিউট করে ডেটা প্রদান করেছে।
- Dynamic Data Display: ব্যবহারকারী পেজ রিলোড ছাড়াই ডেটা দেখতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে।
Content added By
Read more
